<template>
    <div
            :id="id"
            :class="className"
            :style="{height: height, width: width}"
    />
</template>

<script lang="ts">
    import echarts, {EChartOption} from 'echarts'
    import {Component, Prop} from 'vue-property-decorator'
    import {mixins} from 'vue-class-component'
    import ResizeMixin from './mixins/resize'
    import {convertBase64ToBlob, downloadFile} from "@/core/utils/download";

    @Component({
        name: 'LineChart'
    })
    export default class extends mixins(ResizeMixin) {
        @Prop({default: 'chart'}) private className!: string;
        @Prop({default: '统计图'}) private fileName!: string;
        @Prop({default: 'chart'}) private id!: string;
        @Prop({default: '200px'}) private width!: string;
        @Prop({default: '200px'}) private height!: string;
        @Prop({default: ''}) private title!: string;

        option: any = {
            title: {
                text: this.title,
                subtext: "",
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: [] // 行业名称
            },
            grid: {
                left: '3%',
                right: '240px',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []  // 时间轴
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        }

        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose();
            this.chart = null
        }

        private initChart() {
            this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement);
            this.chart.setOption(this.option as EChartOption<EChartOption.SeriesLine>);
        }

        changeChart(legendList: any, data: any, timeList: any) {
            this.option.legend.data = legendList;
            this.option.series = data;
            this.option.xAxis.data = timeList;
            this.chart?.setOption(this.option);
        }

        // 导出图片
        exportImg(fileName: string) {
            downloadFile(convertBase64ToBlob(this.chart?.getDataURL({
                pixelRatio: 2,
                backgroundColor: '#fff'
            })), this.fileName)
        }
    }

</script>
